/**
 * 查找 注冊的組件
 * 创建相应承载体
 * 加载到 honor_content
 * 
 * 异步加载 相关组件
 * 如果 流量限制 提供最简单的 数据模式 --settimeout(300)同步延遲 是否加載完成
 * @param {Object} obj
 */
import {toStringTypeCheck,SetStaticCssTxtFunc} from '../../global/global.js'

import {
	createApp
} from "vue"


//初始 加载comp vector(载体) 值
let initComp = "initComp"

function loadComponents(host) {
	console.log("承載體: " + host);


	// 初始化 initComp {display:none;}
	// 創建臨時的 style 標簽
	let initCompCss = SetStaticCssTxtFunc(host)
	initCompCss("initCompstyle", `
	.initComp{
		display: none;
	}
	`)


	//在超時 后的狀態碼  true 繼續加載 || false 超時后 不再加載
	let timeoutContinue = true

	//裝配 comps 組件信息
	let loadedComps = {
		data: []
	}

	//承載 主體
	let Contentbody = document.getElementById(host)
	console.log(Contentbody);

	//外部獲取 到 register 數據
	let {
		componentsInfo
	} = require("../../../../lock/honor/register.js")
	let registerComps = componentsInfo
	// console.log(registerComps);

	//失敗的 組裝
	let fallLoadComps = []

	function CompsManagement(compArr) {
		if (compArr == undefined) {
			return loadedComps
		} else if (toStringTypeCheck(compArr, "string")) {

			if (compArr == "all" || compArr == "All") {
				return registerComps
			}
			if (loadedComps["data"].indexOf(compArr) > -1) {
				//返回 定位的元素
				console.log("is already load :)");
			} else {
				if (registerComps["data"].indexOf(compArr) > -1) {
					return registerComps[compArr]
				} else {
					console.log("sorry you have not define " + compArr + " Component");
				}
			}
		} else if (toStringTypeCheck(compArr, "array")) {

			for (let i = 0; i < compArr.length; i++) {
				if (loadedComps["data"].indexOf(compArr[i]) > -1) {
					undefined
				} else if (registerComps["data"].indexOf(compArr[i]) > -1) {
					loadVector(compArr[i])
					importComp(compArr[i])
				} else {
					fallLoadComps.push(compArr[i])
				}
			}
			//預備裝載完成
			// console.log(loadedComps);

			//按序 加载 vector
			appendComp()

			//延迟设置 在超時 后的狀態碼
			setTimeout(() => {
				console.log(timeoutContinue);
				// timeoutContinue = !timeoutContinue
			}, 1000)
		}
		console.log("装配的组件" + compArr);
	}


	/**
	 * 创建记录 承载体
	 * @param {Object} key
	 */
	function loadVector(key) {
		console.log(key);

		let regcomp = registerComps[key]

		//添加 data 信息
		loadedComps["data"].push(key)

		loadedComps[key] = {}

		//添加 創建 承載體
		// console.log(regcomp["vector"]);
		loadedComps[key]["parentNode"] = vectorAsync(regcomp["vector"])
	}

	function importComp(key) {
		console.log(key);
		let regcomp = registerComps[key]

		// console.log(regcomp["formUrl"]);
		import(`${regcomp["formUrl"]}`).then((a) => {
			// console.log(a);
			loadedComps[key]["compnent"] = createApp(a.default)

			//在超時 后的狀態碼  true 繼續加載 || false 超時后 不再加載
			if (timeoutContinue == true) {
				//执行 挂元素
				mountComp(loadedComps[key]["compnent"])
			} else {
				fallLoadComps.push(key)
			}
		}, (b) => {
			console.log(b);
		})


		//挂载元素
		function mountComp(vueNode) {
			let comp = loadedComps[key]
			let targetElName = comp["parentNode"].id != "" ? "#" + comp["parentNode"].id : "." + comp["parentNode"].classList[0]
			let acd = vueNode.mount(targetElName)

			// console.log(acd["$el"].parentNode.classList);

			//解除 initComp class
			acd["$el"].parentNode.classList.remove(initComp)

		}

	}

	function appendComp() {

		for (let key = 0; key < loadedComps["data"].length; key++) {
			console.log(loadedComps, key);
			let comp = loadedComps[loadedComps["data"][key]]
			//裝載 parentNode
			appendVector(comp["parentNode"])
		}

		//放置 目标 元素 到指定位置
		function appendVector(el) {
			console.log(Contentbody);
			let avd = Contentbody.appendChild(el)
			console.log(avd);
		}
	}

	// //限制加載 根元素
	// host
	// let hostID = "honor_content"
	// // console.log(obj);

	// let Contentbody = document.querySelector(hostID)||document.getElementById(hostID)

	// //承载体集合 之后 按次序 添加到 根元素
	// let pushClaDiv = []


	// //添加  * 创建相应承载体
	// for (let i = 0; i < Things.length; i++) {
	// 	createDiv(Things[i])
	// }

	// // * 加载到 honor_contentdocument.getElementsByClassName(hostID)[0]
	// for (let i = 0; i < pushClaDiv.length; i++) {
	// 	Contentbody.appendChild(pushClaDiv[i])
	// }

	// //加載 組配件 返回 搜索信息
	// async function locateComponent() {
	// 	let comData = await import('@/lock/honor/register.js');

	// 	function searchCom(name) {
	// 		if (name == undefined) {
	// 			return comData
	// 		}
	// 		if (comData != undefined) {
	// 			if (comData.indexOf(name) > -1) {
	// 				return comData[name]
	// 			}
	// 		}
	// 	}
	// 	return searchCom
	// }


	// //创建 承载体
	// function createDiv(cla) {
	// 	let divcla = document.createElement("div")
	// 	divcla.classList.add(cla)
	// 	pushClaDiv.push(divcla)
	// }


	// function analysisObj(obj_i) {
	// 	let datasource = ""
	// 	let importUrl = ""
	// 	let

	// 	return {}
	// }

	// function arrComLoad(arr) {
	// 	for (var i = 0; i < arr.length; i++) {
	// 		arr[i]
	// 	}
	// }

	// return arrComLoad
	return CompsManagement
}

/**
 * 可以 簡單配置 __str div // div.cal // div#id // div.cla{}
 * @param {Object} vectorObj
 */
function vectorAsync(vectorObj) {
	console.log(vectorObj);

	let result = {}

	if (vectorObj["__str"] != undefined) {
		let regtag = /(?<tag>[^#.]+)/
		let regName = /(?<tag>[^#.]+)(?<type>[#.])(?<name>[^{}]+)/
		let regStyle = /(?<tag>[^.#]+)(?<type>[.#])(?<name>[^{}]+)(?<style>\{[^}]+?\})/

		let tagG = regtag.exec(vectorObj["__str"]) != undefined ? regtag.exec(vectorObj["__str"])["groups"] : undefined
		let nameG = regName.exec(vectorObj["__str"]) != undefined ? regName.exec(vectorObj["__str"])["groups"] : undefined
		let styleG = regStyle.exec(vectorObj["__str"]) != undefined ? regStyle.exec(vectorObj["__str"])["groups"] : undefined
		if (styleG != undefined) {
			console.log(styleG);

			vectorObj["Nodename"] = styleG["tag"]
			vectorObj["id"] = styleG["type"] == "#" ? styleG["name"] : ""
			vectorObj["class"] = styleG["type"] == "." ? styleG["name"] : ""
			vectorObj["style"] = styleG["style"]

			result = createHtmlNode(styleG["tag"], styleG["type"], styleG["name"], styleG["style"])
		} else if (nameG != undefined) {
			console.log(nameG);

			vectorObj["Nodename"] = nameG["tag"]
			vectorObj["id"] = nameG["type"] == "#" ? nameG["name"] : ""
			vectorObj["class"] = nameG["type"] == "." ? nameG["name"] : ""
			// vectorObj["style"] = nameG["style"]

			result = createHtmlNode(nameG["tag"], nameG["type"], nameG["name"])
		} else if (tagG != undefined) {
			console.log(tagG);

			// vectorObj["Nodename"] = tagG["tag"]
			// vectorObj["id"] = tagG["type"] == "#" ? tagG["name"] : ""
			// vectorObj["class"] = tagG["type"] == "." ? tagG["name"] : ""
			vectorObj["style"] = tagG["style"]

			result = createHtmlNode(tagG["tag"])
		} else {
			console.log("sorry you might set an wrong value at /n" + vectorObj);
		}

	} else {
		if (vectorObj["id"] != "") {
			result = createHtmlNode(vectorObj["Nodename"], "#", vectorObj["id"], vectorObj["style"])
		}
		if (vectorObj["class"] != "") {
			result = createHtmlNode(vectorObj["Nodename"], ".", vectorObj["class"], vectorObj["style"])

		}
	}


	/**
	 * 組建 dom 元素
	 * @param {Object} tag	--标签类别
	 * @param {Object} type	--标签类或名 标示
	 * @param {Object} name	--标签名
	 * @param {Object} style	--标签内嵌样式
	 */
	function createHtmlNode(tag, type, name, style) {
		console.log(tag, type, name, style);

		let domel = document.createElement(tag)
		if (type != undefined) {
			if (type == ".") {
				domel.classList.add(name)
			} else if (type == "#") {
				domel.id = name
			}
			if (style != undefined) {
				//引用 临时标示 样式
				// console.log();
				domel.style = style
			}
		}
		return domel
	}

	//初始 展現 style display : none; 確保 順序正確
	result.classList.add(initComp)

	return result
}



//********************* extends tools **************************//

export {
	loadComponents
}
